<template>
    <div class='_container' :class='type'><span class='_color-block' :style='{borderColor : color}'></span><slot></slot></div>
</template>

<script>
export default {
    name : 'color-block-text',
    props : {
        type : {
            type : String,
            default : 'square'
        },

        color : {
            type : String,
            default : ''
        }
    }
}
</script>

<style scoped lang='scss'>
    ._container{
        display: inline-block;
        position: relative;

        ._color-block{
            position:absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        &.square{
            padding-left: 15px;
            ._color-block{
                border: 5px solid transparent;
            }
        }

        &.dashed{
            padding-left: 35px;
            ._color-block{
                width: 30px;
                border-top: 2px dashed transparent;
            }
        }

        &.line{
            padding-left: 35px;
            ._color-block{
                width: 30px;
                border-top: 2px solid transparent;
            }
        }
        
        

    }
</style>